<template>
  <div class="app">
    <div v-for="OneMenu in permissionMenuList">
      <a-popover v-if="OneMenu.children && OneMenu.children.length>0" placement="right" >
        <template slot="content" >
          <div class="ddl">
            <a-row :gutter="16" style="width: 600px;">
              <a-col :span="8" v-for="TwoMenu in OneMenu.children">
                <a-card :title=TwoMenu.meta.title class="acard" @click="menuClick(TwoMenu.name)" style="cursor:pointer;">
                  <p class="p" v-for="ThrMenu in TwoMenu.children" @click="menuClick(ThrMenu.name)">
                    {{ThrMenu.meta.title}}
                  </p>
                </a-card>
              </a-col>
            </a-row>
          </div>
        </template>
        <a-button class="bt" ref="ygdwkgmj" @click="YSGB()" style="" block><a-icon :type="iconsRandomNumber()"/>{{OneMenu.meta.title}}</a-button>

      </a-popover>

      <a-button v-else class="bt1"  block @click="menuClick(OneMenu.name)"><a-icon type="home" />{{OneMenu.meta.title}}</a-button>
    </div>
  </div>

</template>

<script type="text/javascript">
  import { mapState } from 'vuex'
  import {ICONS} from '@/store/mutation-types'
  let iconNum = 0
  export default {

    data () {
      return {
      }
    },
    computed: {
      ...mapState({
        // 后台菜单
        permissionMenuList: state => state.user.permissionList
      })
    },
    methods:{
      iconsRandomNumber(){
        if(iconNum>= ICONS.length){
          iconNum = 0;
        }
        return ICONS[iconNum++].name;
      },
      YSGB(){
        this.$refs.ygdwkgmj.style.backgroundColor = "#3657be";
      },
      menuClick (name) {
        this.$router.push({ name: name });
      },
    }
  }
</script>
<style>
  .ddl dl dt{
    display: block;
    float: left;
    width:200px;
    height:30px !important;
    line-height: 22px;
    text-align: right;
    /*padding-right:6px;*/
  }
  .bt:hover{
    color:#ffffff !important;
    background-color: #1890FF !important;
  }
  .bt :active{
    color:#1890FF !important;
  }
  .ddl dl dd {
    display: block;
    overflow: hidden;
  }
  .ddl dl dd a{
    display: block;
    float: left;
    padding: 0 8px;
    height:14px;
    line-height: 14px;
    text-align: center !important;
    border-left: 2px solid #ccc;
    font-weight: bold;
    font-size: 13px;
    margin-top: 4px;
  }

  .bt1,.bt{
    border: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space:nowrap !important;
  }
  .bt{
    color: rgba(0,0,0,0.65) !important;
    height: 50px !important;
    border-radius: 0px !important;
    text-align: left !important;
    padding-left: 30px !important;
  }
  .bt1{
    font-weight:900;
    color: #1890FF !important;
    height: 50px !important;
    text-align: left !important;
    border-radius: 0px !important;
    padding-left: 50px !important;
    font-weight: bold !important;
  }
</style>
